<template>
  <div class="register"> 
    <!-- <img src="@/assets/logo.png" alt="" class="logo"> -->
    <van-form @submit="submit">
     <div class="form">
        <img src="@/assets/logo.png" alt="" class="logo">
  <van-field
    v-model="phone"
    required
    name="手机号"
    label="手机号"
    placeholder="手机号"
    maxlength="11"
    type="tel"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
  <van-field
    v-model="password"
    required
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    maxlength="16"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
    <van-field
    v-model="newPassword"
    required
    type="password"
    name="确认密码"
    label="确认密码"
    placeholder="确认密码"
    maxlength="16"
    :rules="[{ required: true, message: '请再次填写密码' }]"
  />
    <van-field name="radio" label="性别" required>
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
    <van-field
          readonly
          required
          clickable
          name="area"
          :value="region"
          label="地区"
          placeholder="请选择"
          is-link	
          @click="showArea = true"
        />
     </div>
  <div class="div tip flex flex-end">
    <span>已有账号? <router-link to="/Login">去登录</router-link></span>
  </div>

    <div class="btn-box">
        <van-button type="info" round class="btn-common" native-type="submit" loading-text="注册中..." :loading="loading">
       注册
      </van-button>
      </div>
</van-form>
     <!-- 省市区弹框 -->
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="regionChange"
          @cancel="showArea = false"
        />
      </van-popup>
      <!-- end -->

 
    
  </div>
</template>

<script>
import adressList from "@/js/json/area.js";
import { mapState } from 'vuex'

import { Toast } from "vant";


export default {
  components: {
   
  },
  data() {
    return {
      areaList: adressList, // 数据格式见 Area 组件文档
      showArea: false,
      region:'',// 地区
      phone: '15974158911',// 手机号
      password: '111111', // 密码
      newPassword:'',
      sex:'1',// 性别
      regionData:[],
       loading:false,
     
    };
  },
    computed:{
    ...mapState(['openId'])

  },

  methods: {
   // 地区选择
    regionChange(e) {
      let _this = this;
     _this.regionData = e;
      _this.region = `${e[0].name},${e[1].name},${e[2].name}`;
      _this.showArea = false;
     
    },
    submit(values) {
      let _this = this;      
            
          if(_this.verify()){
            let params = {              
              "addressDetail": _this.region,
              "cityId": _this.regionData[1].code,
              "countyId": 0,
              "mobile": _this.phone,
              "openid": _this.openId,
              "password": _this.password,
              "provinceId": _this.regionData[0].code,
              "sex": _this.sex       
            };
             _this.loading = true
               _this.$ajax
            .post(`${_this.$baseUrl}/portal/users/register`, params)
            .then(function(res) {
               _this.loading = false
              if (res.data.code == 200) {               
                _this.$store.commit({type:'ChangeState',parma:res.data.data}); 
                window.localStorage.setItem('userInfo',JSON.stringify(res.data.data)) 
                 _this.$toast.success('注册成功!');
                setTimeout(() => {
                   _this.$router.push({ path: "/Login", query: {} });

                },2000)                    
                
               
              }
            })
            .catch(function(error) {
               _this.loading = false
              console.log(error);
            });
          }
       
    },
    verify(){
      let _this = this
      if(_this.password !== _this.newPassword){
        Toast('两次密码不一致');
        return false
      }
      if(!_this.region){
        Toast('请选择地区');
        return false
      }
      return true

    }
    

  },
  created() {
    let _this = this;
    
   
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.register{
  box-sizing: border-box;
  min-height: 100vh;
  // padding: 0 0.3rem;
  background: #fff;
  .logo{
    width: 2.52rem;
    margin: .5rem auto;
  }
 /deep/ .van-cell__title{
   text-align: left;
 }
 .van-form{
  
   .form{
    //  background: #fff;
      padding: .2rem;
   border-radius: .2rem;
   }
   .title{
     font-size: .3rem;
   }
 }
.van-cell{ 
    padding: .3rem;
   }
  .btn-box{
    box-sizing: border-box;
    padding: 0 16px;
    padding-top: .5rem;
  }
.tip{
  font-size: .28rem;
  padding: .3rem;
  color: #999;
}
}
a{
  text-decoration: underline;
}
</style>
